<template>
  <div class="advertisement-center">
    <div class="advertisement-left">
      <Form
        ref="editForm"
        :model="form"
        :rules="diyData.rules"
        :label-width="120"
      >
      <FormItem :label="form.type!=3?'广告标题：':'公告内容：'" prop="title">
          <Input
                  :placeholder="form.type!=3?'请输入广告标题':'请输入公告内容'"
                  v-model="form.title"
                  class="max-w400"
                />
        </FormItem>
        <!-- <FormItem label="广告位置：" prop="pid">
          <Select class="max-w400" v-model="form.type" filterable placeholder="请选择广告位置">
            <Option value="1">首页banner</Option>
            <Option value="2">首页弹窗</Option>
            <Option value="3">公告</Option>
          </Select>
        </FormItem> -->
        <FormItem label="图片" prop="imgUrl" v-if="form.type!=3">
          <div class="upload-Img">
            <div v-if="form.imgUrl" class="look-img">
              <img :src="form.imgUrl" style="width: 100%" />
              <div class="demo-upload-list-cover">
                <Icon
                  type="ios-eye-outline"
                  @click.native="lookFile(index)"
                ></Icon>
                <Icon
                  type="ios-trash-outline"
                  @click.native="deleteFile(index)"
                ></Icon>
              </div>
            </div>
            <template v-else>
              <Upload
                :action="uploadUrl"
                :headers="headers"
                :on-error="uploadErr"
                :on-success="(value) => uploadSuccess('', value)"
                name="file"
                :show-upload-list="false"
              >
                <div class="upload-btn">
                  <Icon
                    type="ios-cloud-upload"
                    size="52"
                    style="color: #3399ff"
                  ></Icon>
                  <p>点击上传图片</p>
                </div>
              </Upload>
            </template>
          </div>
        </FormItem>
        <FormItem label="广告链接" prop="imUrl" v-if="form.type!=3">
            <RadioGroup v-model="form.linkType">
                  <div style="display: flex;margin-bottom: 10px;">
                      <Radio label="1" value="1" >商品链接：/pages/home/productDetails/productDetails?id= 
                      <Input
                            placeholder="请输入商品ID号"
                            v-model="form.productLinkUrl"
                            style="width:200px"
                            />
                        </Radio>
                  </div>
                  <div style="display: flex;">
                    <Radio label="2" value="2">其他链接：
                     <Input
                            placeholder="请输入广告链接地址"
                            v-model="form.otherLinkUrl"
                           style="width:380px"
                            />
                    </Radio>
                  </div>
            </RadioGroup>
        </FormItem>
        <FormItem label="广告状态" prop="imUrl">
                <Select class="max-w400" v-model="form.status" filterable placeholder="请选择广告状态">
                    <Option value="1">生效</Option>
                    <Option value="0">禁用</Option>
                </Select>
        </FormItem>
        <FormItem>
          <div class="footer">
            <Button @click="ModalCancel">取消</Button>
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="getConfirm"
              >确认</Button
            >
          </div>
        </FormItem>
      </Form>
    </div>
    <!-- <div class="effect">
      <div class="title">广告预览</div>
      <div class="effect-center"></div>
    </div> -->
  </div>
</template>

<script>
import {apiBannerList,apiBannerSave,apiBannerDelete} from '@/api/advertisement-manage.js'
export default {
  name: "advertisement-edit",
  data() {
    return {
      headers: {
        token: localStorage.getItem("token"),
      },
      uploadUrl: process.env.VUE_APP_API_URL + "/upload-file",
      form: {
        id:'',
        imgUrl:'',
        otherLinkUrl:'',
        productLinkUrl:'',
        status:'',
        title:'',
        type:'',
        linkType:'',
      },

      // query参数
      query: {},
      // 搜索参数
      search: {},
      diyDom: {},
      diyData: {
        rules: {},
      },
    };
  },
  methods: {
    uploadSuccess(type, res, index = 0) {
      if (res.code != 200) {
        return this.$Modal.error({ title: "提示", content: res.msg });
      }
      this.$Message.success("文件上传成功");
      this.form.imgUrl = res.data.fileUrl;
    },
    // 文件上传失败
    uploadErr() {
      this.$Spin.hide();
      this.$Modal.error({
        title: "提示",
        content: "文件上传失败，请重试",
      });
    },
    // 查看文件
    lookFile(index = 0, type) {
      let url = "";
      url = this.form.imgUrl;
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.target = "_blank";
      a.href = url;
      a.click();
      document.body.removeChild(a);
    },
    // 删除文件
    deleteFile(index = 0, type) {
      this.$Modal.confirm({
        title: "提示",
        content: "确认删除文件？",
        onOk: () => {
          this.form.imgUrl = "";
        },
      });
    },
    getConfirm(){
        var opt=this.form
        apiBannerSave(opt).then(res=>{
            if(res.code==200){
                this.$Message.success('操作成功');
                this.$router.go(-1)
            }else{
                this.$Message.error(res.msg)
            }
        })
    },
    ModalCancel(){
      this.$router.go(-1)
    },
  },
  mounted() {
    this.query = this.$route.query;
    this.form.type=this.query.type+''
    if(this.$route.query.id){
        var row=JSON.parse(this.$route.query.row)
        this.form={
            id:this.$route.query.id,
            imgUrl:row.imgUrl,
            otherLinkUrl:row.otherLinkUrl,
            productLinkUrl:row.productLinkUrl,
            status:row.status+'',
            title:row.title,
            type:row.type+'',
            linkType:row.linkType
        }
    }
  },
};
</script>

<style scoped lang="less">
.max-w400{
    max-width: 400px;
    width: 100%;
}
.advertisement-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .advertisement-left {
    width:100%;
    background: #fff;
    min-height: 700px;
    padding: 40px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
